<template>
  <div>
    <page-list :x-uri="uri" :custom-components="custom" :doactions="doactions" :search-options="dateOptions" :checkbox-item="false">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs />
      </template>
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button v-auth="'finance.order.goods.export'" size="mini" type="primary" @click="exportOrder">导出订单</el-button>
      </template>
      <!-- 多选操作 -->
      <!-- <template v-slot:table-button="scope">
        <el-button v-auth="'school.delete'" size="mini" @click="deletes(scope)">删除</el-button>
      </template> -->
    </page-list>
    <el-dialog title="请输入物流信息" :visible.sync="expressDialog" width="500px" :close-on-click-modal="false" top="30vh">
      <el-form v-if="expressDialog" ref="express" label-width="100px" :model="express" size="small">
        <el-form-item label="物流公司" prop="title" :rules="rulesTitle"><edu-input key="title" :value.sync="express.title" :args="{ minlength: 2, maxlength: 10 }" /></el-form-item>
        <el-form-item label="快递单号" prop="order" :rules="rulesOrder"><edu-input key="order" :value.sync="express.order" :args="{ minlength: 2, maxlength: 30 }" /></el-form-item>
        <el-form-item>
          <el-row type="flex" justify="end">
            <el-button @click="expressDialog = false">取消</el-button>
            <el-button type="primary" :disabled="disableSubmit" @click="expressSubmit">保存</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog class="express" title="订单详情" :visible.sync="visible" width="60%" top="7.5vh" :close-on-click-modal="false">
      <el-container>
        <el-aside width="200px">账号信息</el-aside>
        <el-main>
          <el-form label-width="120px" size="mini">
            <el-form-item label="用户名:">{{ response.user_name }}</el-form-item>
          </el-form>
        </el-main>
      </el-container>
      <el-divider />
      <el-container>
        <el-aside width="200px">商品信息</el-aside>
        <el-main>
          <el-form label-width="120px" size="mini">
            <el-form-item label="商品名称:">{{ response.title }}</el-form-item>
            <el-form-item label="商品价格:"><money :value="response.cash_price" /></el-form-item>
            <el-form-item label="积分抵扣:">{{ response.credit_price }}</el-form-item>
            <el-form-item v-if="!response.fictitious" label="商品运费:"><money :value="response.carriage" /></el-form-item>
          </el-form>
        </el-main>
      </el-container>
      <el-divider />
      <el-container>
        <el-aside width="200px">订单信息</el-aside>
        <el-main>
          <el-form label-width="120px" size="mini">
            <el-form-item label="订单号:">{{ response.order_no }}</el-form-item>
            <el-form-item label="数量:">{{ response.num }}</el-form-item>
            <el-form-item label="支付金额:"><money :value="response.payment" /></el-form-item>
            <el-form-item label="抵扣积分:">{{ response.credit_use }}</el-form-item>
            <el-form-item label="下单时间:">{{ response.create_time }}</el-form-item>
            <el-form-item label="支付时间:">{{ response.payment_time }}</el-form-item>
          </el-form>
        </el-main>
      </el-container>
      <el-divider v-if="!response.fictitious" />
      <el-container v-if="!response.fictitious">
        <el-aside width="200px">地址信息</el-aside>
        <el-main>
          <el-form label-width="120px" size="mini">
            <el-form-item label="收货人:">{{ response.consignee }}</el-form-item>
            <el-form-item label="收货人手机号:">{{ response.phone }}</el-form-item>
            <el-form-item label="收货人地址:">{{ response.address }}</el-form-item>
          </el-form>
        </el-main>
      </el-container>
      <el-divider v-if="ext.title && ext.order" />
      <el-container v-if="ext.title && ext.order">
        <el-aside width="200px">物流信息</el-aside>
        <el-main>
          <el-form label-width="120px" size="mini">
            <el-form-item label="物流公司:">{{ ext.title }}</el-form-item>
            <el-form-item label="快递单号:">{{ ext.order }}</el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
// import Tabs from './tabs';
import Tabs from '@/pages/finance/order/tab/index.vue';
import EduInput from '@public/form/input.vue';
import { Loading } from 'element-ui';
import Status from './components/status';
import Order from '@/pages/finance/order/components/order';
import Money from './components/form_money.vue';
import { shortcutsLayterThreeMonth } from '@/common/js/const.js';

export default {
  components: {
    PageList,
    EduInput,
    Money,
    Tabs
  },
  inject: ['reload'],
  data() {
    return {
      uri: '/mall/admin/order/list',
      doactions: [
        { title: '物流', meta: { permission: 'finance.order.goods.logistics' }, callback: this.editExpress },
        { title: '详情', meta: { permission: 'finance.order.goods.detail' }, callback: this.detail }
      ],
      custom: {
        status: Status,
        order: Order
      },
      order_sub_no: '',
      express: {
        title: '',
        order: ''
      },
      visible: false,
      response: {},
      ext: {},
      expressDialog: false,
      disableSubmit: false,
      dateOptions: {
        date: {
          shortcuts: shortcutsLayterThreeMonth
        }
      },
      rulesTitle: [
        { required: true, message: '物流公司名称必须填写', trigger: ['blur', 'change'] },
        {
          pattern: /^.{2,10}$/,
          message: '名称为2-10个字符',
          trigger: ['blur', 'change']
        }
      ],
      rulesOrder: [
        { required: true, message: '快递单号必须填写', trigger: ['blur', 'change'] },
        {
          pattern: /^[a-zA-Z0-9]{2,30}$/,
          message: '快递单号为2-30个字母、数字符',
          trigger: ['blur', 'change']
        }
      ]
    };
  },
  methods: {
    editExpress: function({ row }) {
      this.order_sub_no = row.order_sub_no;
      this.express = {
        title: row.ext_data.title ? row.ext_data.title : '',
        order: row.ext_data.order ? row.ext_data.order : ''
      };
      this.expressDialog = true;
      console.log(this.express, row);
    },
    expressSubmit: function() {
      this.$refs['express'].validate(valid => {
        if (valid) {
          this.disableSubmit = true;
          var method = 'POST';
          var uri = '/mall/admin/order/' + this.order_sub_no + '/express';
          console.log(this.express);
          this.$http.send(
            method,
            uri,
            this.express,
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.disableSubmit = false;
              this.$message.error(error.msg);
            }
          );
        }
      });
    },
    detail: function({ row }) {
      this.response = row;
      this.ext = row.ext_data;
      this.visible = true;
      // this.$router.push({ path: '/mall/order/' + row.order_no + '/detail' });
    },
    exportOrder: function() {
      const search = this.$store.getters['pageList/search/data'];
      const loadingInstance = Loading.service({
        text: '正在导出文件，请稍后...'
      });
      // console.log(search);
      loadingInstance.close();
      this.$http
        .downloadExcel('mall/admin/order/export', search)
        .then(() => {
          loadingInstance.close();
          this.$message.success('下载成功');
        })
        .catch(msg => {
          loadingInstance.close();
          this.$message.error(msg);
        });
    },
    delete: function({ row }) {
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/mall/admin/order/' + row.id,
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    // 批量删除
    deletes: function({ rows }) {
      var ids = rows.map(row => row.id);
      if (ids.length === 0) {
        this.$message.warning('请选择要删除的商品');
        return false;
      }
      ids = ids.join(',');
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/mall/admin/product/deletes/' + ids,
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    }
  }
};
</script>
<style scoped>
.el-aside {
  background-color: #d3dce6;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.express .el-form-item {
  margin-bottom: 0;
}
.reason-btns {
  margin-top: 20px;
}
.el-divider {
  margin: 8px 0;
}
</style>
